<template>
  <div>
    <a-modal
      title="业绩明细"
      :width="1000"
      :footer="null"
      :destroy-on-close="true"
      v-model="visible"
    >
      <div style="margin-bottom: 20px">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="8" :sm="24">
              <a-form-item label="购买者">
                <a-input v-model="where.buyer_keyword" placeholder="请输入用户ID/昵称" allowClear />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="订单号">
                <a-input v-model="where.order_no" placeholder="请输入订单" allowClear />
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <a-form-item label="">
                <a-button type="primary" @click="getList">查询</a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div class="table-operator flex-y-center flex-x-sb">
        <div class="flex-y-center flex-x-sb">
          <a-radio-group v-model="where.order_type" style="margin-right: 15px" @change="getList">
            <a-radio-button :value="''"> 全部 </a-radio-button>
            <a-radio-button :value="1"> 商品 </a-radio-button>
            <a-radio-button :value="2"> 办卡 </a-radio-button>
            <a-radio-button :value="3"> 充值 </a-radio-button>
            <a-radio-button :value="4"> 广告 </a-radio-button>
          </a-radio-group>
          <a-radio-group v-model="where.all" @change="getList">
            <a-radio-button :value="1"> 全部 </a-radio-button>
            <a-radio-button value=""> 本月 </a-radio-button>
          </a-radio-group>
        </div>
        <div>检索结果：{{ totalCount }}条，业绩{{ total_performance }}</div>
      </div>
      <a-table
        style="width: 100%; overflow-x: auto"
        v-if="columns.length"
        ref="tableList"
        :columns="columns"
        :data-source="dataSource"
        :loading="loading"
        :row-key="(record) => record.id"
        :pagination="{
          total: this.totalCount,
          current: this.where.pageNo,
          showSizeChanger: true,
          onChange: this.tablePageChange,
          onShowSizeChange: this.paginationSizeChange,
        }"
        @change="handleTableChange"
        :scroll="{ x: 1500 }"
      >
        <template slot="area" slot-scope="record">
          {{ record.agent.province }}{{ record.agent.city }}{{ record.agent.district }}
        </template>
        <template slot="order_type" slot-scope="record">
          {{
            record.order_type == 1 ? '商品' : record.order_type == 2 ? '办卡' : record.order_type == 3 ? '充值' : '广告'
          }}
        </template>
        <template slot="order_info" slot-scope="record">
          <div v-if="record.order_type == 1 || record.order_type == 2">
            <div v-for="(item, index) in record.order.detail" :key="index">
              {{ item.goods_name }}
            </div>
          </div>
          <div v-if="record.order_type == 3">
            {{ record.order.face_recharge.name }}
          </div>
          <div>{{ record.order_no }}</div>
        </template>
        <template slot="buy_user" slot-scope="record">
          <div class="flex-y-center">
            <img style="width: 35px; height: 35px; margin-right: 5px" :src="record.buy_user_avatar" alt="" />
            {{ record.buy_user_nickname }}
          </div>
        </template>
        <template slot="status" slot-scope="record">
          <a-tag :color="record.status == 1 ? 'blue' : ''">{{ record.status_text }}</a-tag>
        </template>
      </a-table>
    </a-modal>
  </div>
</template>

<script>
import { bonusListApi } from '@/api/area'
export default {
  name: 'bounsInfo',
  props: {},
  data() {
    return {
      visible: false,
      where: {
        ach_id: '',
        order_type: '',
        all: 1,
        buyer_keyword: '',
        order_no: '',
        pageNo: 1,
        pageSize: 10,
      },
      dataSource: [],
      loading: false,
      totalCount: 0,
      total_money: 0,
      total_integral: 0,
      total_performance: 0,
      columns: [
        {
          title: 'ID',
          dataIndex: 'id',
          width: 60,
        },
        {
          title: '代理区域',
          width: 180,
          scopedSlots: { customRender: 'area' },
        },
        {
          title: '来源',
          width: 60,
          scopedSlots: { customRender: 'order_type' },
          align: 'center',
        },
        {
          title: '订单信息',
          scopedSlots: { customRender: 'order_info' },
          width: 200,
        },
        {
          title: '购买者',
          scopedSlots: { customRender: 'buy_user' },
          width: 140,
        },
        {
          title: '订单金额',
          dataIndex: 'order_price',
          width: 100,
          align: 'center',
        },
        {
          title: '订单业绩',
          dataIndex: 'performance',
          width: 100,
          align: 'center',
        },
        {
          title: '业绩状态',
          width: 100,
          scopedSlots: { customRender: 'status' },
          align: 'center',
        },
        {
          title: '结算时间',
          dataIndex: 'settled_at',
          width: 180,
          align: 'center',
          // sorter: true,
        },
      ],
    }
  },
  created() {},
  methods: {
    getList() {
      var _self = this
      _self.loading = true
      bonusListApi(_self.where)
        .then((res) => {
          const { data, totalCount, total_money, total_integral, total_performance } = res.data
          _self.dataSource = data
          _self.totalCount = totalCount
          _self.total_money = total_money
          _self.total_integral = total_integral
          _self.total_performance = total_performance
          _self.loading = false
        })
        .catch((err) => {
          _self.loading = false
        })
    },
    tablePageChange(e) {
      this.where.pageNo = e
      this.getList()
    },
    paginationSizeChange(current, size) {
      this.where.pageNo = current
      this.where.pageSize = size
      this.getList()
    },
  },
}
</script>

<style lang="scss"></style>
